<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- AUTHOR: JOEY, Jason -->
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      >
    <body>
        <ui:composition>
            <h:form>

                <p:tabView>
                    <p:tab title="Exercise Progress" >
                        <p:outputPanel>
                            <p:remoteCommand name="updateExerciseProgress" update="@form"/>
                            <h:panelGrid columns="4" >
                                <h:panelGroup >
                                    <h:outputText value="Choose a Date Range:" />
                                    <h:selectOneMenu id="daterange" value="#{exerciseProgressBean.selectedDateRange}"  >  
                                        <f:selectItems value="#{exerciseProgressBean.dateRanges}" var="dr" itemLabel="#{dr}" itemValue="#{dr}"/>
                                    </h:selectOneMenu>
                                </h:panelGroup>
                                <p:commandButton value="Refresh" process="@form" update=":tabForm:growl exerciseProgressTable" action="#{exerciseProgressBean.refreshDateRange}"/>
                                <h:outputText value="You can modify the scores for the submitted exercises by entering new scores and clicking the Save New Scores button." />
                                <p:commandButton value="Save New Scores" process="@form" update=":tabForm:growl" action="#{exerciseProgressBean.saveNewScores}" />
                            </h:panelGrid>
                            <!-- EXERCISE PROGRESS REPORT PANEL -->
                            <p:fieldset legend="Student Exercise Progress Report">
                                <p:dataTable id="exerciseProgressTable" value="#{exerciseProgressBean.exerciseProgressTableList}" var="exercise">
                                    <p:column headerText="Last Name">
                                        <h:outputText value="#{exercise.lastName}" />
                                    </p:column>
                                    <p:column headerText="First Name">
                                        <h:outputText value="#{exercise.firstName}" />
                                    </p:column>
                                    <p:column headerText="Exercise Name">
                                        <h:outputText value="#{exercise.exerciseName}" />
                                    </p:column>
                                    <p:column headerText="Score">
                                        <p:inputText id="score" value="#{exercise.score}" />
                                    </p:column>
                                    <p:column headerText="Max Score">
                                        <h:outputText value="#{exercise.maxScore}"  />
                                    </p:column>
                                </p:dataTable>
                            </p:fieldset>
                        </p:outputPanel>
                    </p:tab>

                    <p:tab title="Exercise Progress Summary" >
                        <h:panelGrid columns="2" >
                            <h:outputText value="Total number of students: " />
                            <h:outputText value="#{exerciseProgressSummaryBean.numberStudents}" />
                        </h:panelGrid>
                        <p:fieldset legend="Student Exercise Progress Summary" style=" margin-top: 50px">
                            <p:dataTable id="progressTable" value="#{exerciseProgressSummaryBean.exerciseProgressSummary}" var="exercise">
                                <p:column headerText="lastname" sortBy="#{exercise.lastname}">
                                    <h:outputText value="#{exercise.lastname}" />
                                </p:column>
                                <p:column headerText="firstname" sortBy="#{exercise.firstname}">
                                    <h:outputText value="#{exercise.firstname}" />
                                </p:column>
                                <p:column headerText="totalScore" sortBy="#{exercise.totalScore}">
                                    <h:outputText value="#{exercise.totalScore}" />
                                </p:column>
                                <p:column headerText="maxTotalScore" sortBy="#{exercise.maxTotalScore}">
                                    <h:outputText value="#{exercise.maxTotalScore}" />
                                </p:column>
                                <p:column headerText="Percentage" sortBy="#{exercise.percentage}">
                                    <h:outputText value="#{exercise.percentage} %" />
                                </p:column>
                                <p:column headerText="Number of Exercises Submitted" sortBy="#{exercise.exercisesSubmitted}">
                                    <h:outputText value="#{exercise.exercisesSubmitted}" />
                                </p:column>
                            </p:dataTable>
                        </p:fieldset>
                    </p:tab>
                </p:tabView>
            </h:form>
        </ui:composition>
    </body>
</html>
